*::after, *::before {
  box-sizing: border-box;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #132730;
  overflow: hidden;
}

/* 第一阶段 */
.box {
  position: relative;
  width: 400px;
  height: 400px;
  border: 80px solid transparent;
  border-left: 80px solid #fff5;
  border-bottom: 80px solid #fff5;
  border-radius: 50%;
  transform: rotate(-45deg);
  animation: animate 2s linear infinite;
}

/* 第三阶段 */
@keyframes animate {
  0%, 100% {
    transform: rotate(333deg);
  }
  50% {
    transform: rotate(290deg);
  }
}

.box::after {
  content: '';
  position: absolute;
  top: -13px;
  left: -34px;
  width: 80px;
  height: 40px;
  background: #FFF;
  border-radius: 50%;
  transform: rotate(45deg);
}

.box::before {
  content: '';
  position: absolute;
  top: 214px;
  right: -33px;
  width: 80px;
  height: 40px;
  background: #FFF;
  border-radius: 50%;
  transform: rotate(45deg);
}

/* 第二阶段 */
.circle {
  position: absolute;
  top: 65px;
  left: -65px;
  width: 70px;
  height: 70px;
  background: #FFf;
  border-radius: 50%;
  box-shadow: inset 0 5px 20px rgba(0,0,0,.5);
  z-index: 10000;
  transform-origin: 200px;
  animation: animateBall 2s linear infinite;
}

@keyframes animateBall {
  0%, 100% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(225deg);
  }
}